<template>
    <div class="top">
    <van-swipe style="height:30px;" :autoplay="3000" vertical id="swiperone" :show-indicators="false" >
    <van-swipe-item>感恩节</van-swipe-item>
    <van-swipe-item>小米816</van-swipe-item>
    </van-swipe>
    <van-search v-model="value" placeholder="请输入搜索关键词"  background="#ff6000" shape="round"
    @focus="Onfocus"
    
    />
</div>
<div class="toplow">
    <van-swipe :autoplay="3000" lazy-render class="imgbox">
    <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  </van-swipe-item>
</van-swipe>
</div>
<main>
<div class="official">
 <span>官方商城 &nbsp;&nbsp;&nbsp;|</span>
 <span>正品保证 &nbsp;&nbsp;&nbsp;|</span>
 <span>满99元包邮</span>
</div>
<div class="skip">
<van-grid :border="false" :column-num="5">
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p0.png"
    height="43px" width="43px"/>
    <span>9.9包邮</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p1.jpg"
    height="43px" width="43px"/>
    <span>新品</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p2.jpg"
    height="43px" width="43px"/>
    <span>手机</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p3.jpg"
    height="43px" width="43px"/>
    <span>电视</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p4.jpg"
    height="43px" width="43px"/>
    <span>智能</span>
  </van-grid-item>
</van-grid>
<van-grid :border="false" :column-num="5" >
    <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p11.jpg"
    height="43px" width="43px"/>
    <span>直播</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p10.jpg"
    height="43px" width="43px"/>
    <span>小米众筹</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p12.jpg"
    height="43px" width="43px"/>
    <span>小米榜单</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p13.jpg"
    height="43px" width="43px"/>
    <span>生活周边</span>
  </van-grid-item>
  <van-grid-item  to="/Skip">
    <van-image
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p14.jpg"
    height="43px" width="43px"/>
    <span class="van-grid-item">企业购</span>
  </van-grid-item>
</van-grid>
</div>
<div class="banner">
  <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u138.svg" alt="">
</div>
<div class="tab">
  <div class="list">
   <ul>
     <li class="listleft">
      <span>最高优惠700元</span>
      <i>Redmi k30 5g</i>
      <a href=""><img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p20.png" alt=""></a>
     </li>
     <li class="listleft">
      <span>笔记本类日</span>
      <i>最高降1500元</i>
      <a href=""><img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p21.png" alt=""></a>
     </li>
     <li class="listleft">
      <span>红包雨福利</span>
      <i>赢一元盲盒</i>
      <a href=""><img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p22.png" alt=""></a>
     </li>

   </ul>
    
  </div>
 
</div>
<div class="classify">
  <ul>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p20.png"
       alt="">
    <span>签到赢小米10</span>
    <p><span>美好生活</span></p>
    </li>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p24.png"
       alt="">
    <span>抢816红包</span>
    <p><span>电视会场</span></p>
    </li>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p21.png"
       alt="">
    <span>限599起</span>
    <p><span>电视会场</span></p>
    </li>
  </ul>
  <ul>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p28.png"
       alt="">
    <span>1折抢爆品</span>
    <p><span>抢万元大奖</span></p>
    </li>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p22.png"
       alt="">
    <span>0元彩膜续航</span>
    <p><span>手机会场</span></p>
    </li>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p27.png"
       alt="">
    <span>空调买柜增挂</span>
    <p><span>小米官方授权</span></p>
    </li>
  </ul>
  <ul>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p29.png"
       alt="">
    <span>22款印花上心</span>
    <p><span>智能会场</span></p>
    </li>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p24.png"
       alt="">
    <span>小米门店Go</span>
    <p><span>家庭会场</span></p>
    </li>
    <li  @click="jumpto">
      <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p30.png"
       alt="">
    <span>最高直降1000元</span>
    <p><span>精选好礼</span></p>
    </li>
  </ul>

</div>
<div class="seckill">
  <p><h3>小米秒杀</h3><span>更多>></span></p>
  <div class="seckbox">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><van-card
      price="89"
      desc="一键秒杀"
      title="小米促销"
      thumb="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p20.png"
      origin-price="99"
>
<template #bottom>
  <van-count-down :time="time" format="DD 天 HH 时 mm分 ss 秒" />
  </template>
  <template #tags>
    <van-tag plain type="danger">秒杀倒计时</van-tag>
  </template>
</van-card></van-swipe-item>
  <van-swipe-item><van-card
      price="100"
      desc="一键秒杀"
      title="小米促销"
      thumb="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p24.png"
      origin-price="110"
>
<template #bottom>
  <van-count-down :time="time" format="DD 天 HH 时 mm分 ss 秒" />
  </template>
  <template #tags>
    <van-tag plain type="danger">秒杀倒计时</van-tag>
  </template>
</van-card>
</van-swipe-item>
  <van-swipe-item><van-card
      price="200"
      desc="一键秒杀"
      title="小米促销"
      thumb="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p21.png"
      origin-price="210"
>
<template #bottom>
  <van-count-down :time="time" format="DD 天 HH 时 mm分 ss 秒" />
  </template>
  <template #tags>
    <van-tag plain type="danger">秒杀倒计时</van-tag>
  </template>
</van-card></van-swipe-item>
  <van-swipe-item><van-card
      price="300"
      desc="一键秒杀"
      title="小米促销"
      thumb="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p27.png"
      origin-price="310"
>
<template #bottom>
  <van-count-down :time="time" format="DD 天 HH 时 mm分 ss 秒" />
  </template>
  <template #tags>
    <van-tag plain type="danger">秒杀倒计时</van-tag>
  </template>
</van-card></van-swipe-item>
</van-swipe>
        
  </div>
</div>
<div class="lable">
  <van-tabs v-model:active="active" background="#eee" line-width="60px" font-size="25px" >
  <van-tab v-for="category in cateAllgories" :key="category.id" :title="category.name">
  </van-tab>
</van-tabs>
</div>
<div class="goodslist">
  <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  
  <van-card
  v-for="item in recommindList" :key="item.id"
  :price="formatMoney(item.price)"
  :desc="item.title"
  :title="item.title"
  :thumb="item.image"
  @click="todeatil"
 >

<template #num>
  <span>月销量{{item.saleNum}}</span>
</template>
</van-card>
</van-list>
</div>
</main>

</template>

<script>
import{Toast, Grid, GridItem,Card,CountDown,Tab, Tabs,List } from 'vant'
import{ref} from 'vue'
import{ getHomeData}from '../api/home'
import { getAllGategory } from '../api/category'


export default {
  
    components:[
    Grid,
    GridItem,
    Card,
    CountDown,
    Tab,
    Tabs,
    List,
    ],
    name:"home",
    data() {
        return {
            
        }
    },
    setup(){
      const list=ref([])
      const recommindList = ref([]);
      const loading = ref(false);
      const finished = ref(false);
      const cateAllgories=ref([])
      const onLoad = () => {
        setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
      
    };
    async function fetchData(){
     const result=await Promise.all([ 
        getHomeData(),
        getAllGategory(),
       
      ])
      const[homeData,categories]=result
      const{banners,items}=homeData
      const{list}=categories
      cateAllgories.value.push(...list)
      recommindList.value.push(...items.list)
    }
    fetchData()
    const formatMoney=(val)=>{
      return Number(val).toFixed(2)
    }
    
        const onChange = (index) => Toast('当前 Swipe 索引：' + index);   
        const value=ref('')
        const images=[
            "https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u96.svg",
            "https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u97.svg",
            "https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u98.svg",
            "https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u99.svg",
        ] 
        const time = ref(30 * 60 * 60 * 1000);
        const active = ref(0);
        const lable=[
         
        ]
        return { onChange, value,images,time,active,lable,  list,
        onLoad,
        loading,
        finished,
        cateAllgories,
        recommindList,
        formatMoney
      };
},
  methods:{
    jumpto(){
      this.$router.push({
        path:'Free',
      })
    },
    Onfocus(){
      this.$router.push({
        path:'homesearch'
      })
    },
    todeatil(){
      this.$router.push({
        path:'goods_detail',
      })

    }

}
}

</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.top{
    background: #ff6000;
    width: 100%;
    display: flex;

}
    #swiperone{
        width: 100px;
        text-align: center;
        color: white;
        font-size: 16px;
        margin-top: 12px;
        font-weight: bold;
    }
    .toplow{
        padding-top: 20px;
        background: #ff6000;
      
    }
    .toplow .imgbox{
        text-align: center;
         
    }
    main{
        flex: 1;
        background: #eee;
        overflow-y: auto;
    }
    .official{
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        color: #ff9000;
    }

    .van-grid-item{
        font-size: 12px;

    }
    .skip{
        width: 340px;
      
        margin: 10px auto;       
    }
    .banner{
    width: 345px;
    height: 100px;
    margin: 0 auto;
    }
    .list ul{
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    .listleft{
      width: 109px;
      height: 130px;
      background: url("https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u140.svg");
      box-sizing: border-box;
      margin-top: 10px;
    }
    .listleft span{
      font-size: 12px;
      display: block;
      width: 81px;
      height: 16px;
      color: #333;
      text-align: center;
      margin: 0 auto;
      font-weight: bold;
    }
    .listleft i{
      font-size: 12px;
      display: block;
      width: 78px;
      height: 16px;
      color: #8080ff;
      margin: 10px auto;
      text-align: center;
      font-weight: bold;
    }
    .listleft img{
      width: 60px;
      height: 49px;
      display: block;
      margin: 0 auto;
    }
    .classify{
    
      width: 100%;
    
    }
    .classify ul{
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      background-color: #eee;
    }
    .classify ul li{
      width: 109px;
      height: 130px;
      background: #fff;
      border-radius: 10px;
    }
    .classify ul li img{
      width: 60px;
      height: 60px;
      display: block;
       margin: 0 auto;
      
    }
    .classify ul li span{
      display: block;
      width: 76px;
      height: 16px;
      font-size: 12px;
      color: #333;
      text-align: center;
      margin: 10px auto;
      font-weight: bold;
    }
    .classify ul li p{
      width: 90px;
      height: 20px;
      background: #DDA0DD;
      margin: 0 auto;
      border-radius: 10px;
    }
    .classify ul li p span{
      color: #fff;
      font-size: 12px;
      line-height: 20px;

    }
    .seckill{
      width: 346px;
      background: #fff;
      border-radius: 10px;
      margin: 10px auto;
    }
    .seckill p{
      display: flex;
      justify-content: space-between;
    }
    .seckill p span{
      font-size: 12px;
      color: #ccc;
    }
.lable{
  margin: 0  auto;
  width: 350px;
  
}
   

</style>